<template>
  <div class="group_11 flex-col">
    <div class="group_30 flex-row justify-between">
      <div class="text-group_24 flex-col justify-between">
        <span class="text_36">研究成果</span>
        <span class="text_37">RESEACH</span>
      </div>
      <span class="text_38" @click="gotoPaper()">MORE&nbsp;&gt;&gt;</span>
    </div>
    <div class="grid_2 flex-row">
      <div class="box_3 flex-col">
        <div class="group_12 flex-col"></div>
        <span class="text_39" @click="openLink(0)">{{ this.papers[0].content }}</span>
        <div class="group_13 flex-row">
          <div
            class="image-text_20 flex-row justify-between"
            @click="openLink(0)"
          >
            <img
              class="thumbnail_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng92b27a33489a7bda69edc446047d7f25109f9351328adb4e69779172994168a1"
            />
            <span class="text-group_5">阅读报告</span>
          </div>
        </div>
      </div>
      <div class="box_4 flex-col">
        <div class="group_14 flex-col"></div>
        <span class="text_40" @click="openLink(1)">{{ this.papers[1].content }}</span>
        <div class="group_15 flex-row">
          <div
            class="image-text_21 flex-row justify-between"
            @click="openLink(1)"
          >
            <img
              class="thumbnail_8"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng92b27a33489a7bda69edc446047d7f25109f9351328adb4e69779172994168a1"
            />
            <span class="text-group_6">阅读报告</span>
          </div>
        </div>
      </div>
      <div class="box_5 flex-col">
        <div class="section_4 flex-col"></div>
        <span class="text_41" @click="openLink(2)">{{ this.papers[2].content }}</span>
        <div class="section_5 flex-row">
          <div
            class="image-text_22 flex-row justify-between"
            @click="openLink(2)"
          >
            <img
              class="thumbnail_9"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng92b27a33489a7bda69edc446047d7f25109f9351328adb4e69779172994168a1"
            />
            <span class="text-group_7">阅读报告</span>
          </div>
        </div>
      </div>
      <div class="box_6 flex-col">
        <div class="group_16 flex-col"></div>
        <span class="text_42" @click="openLink(3)">{{ this.papers[3].content }}</span>
        <div class="group_17 flex-row">
          <div
            class="image-text_23 flex-row justify-between"
            @click="openLink(3)"
          >
            <img
              class="thumbnail_10"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng92b27a33489a7bda69edc446047d7f25109f9351328adb4e69779172994168a1"
            />
            <span class="text-group_8">阅读报告</span>
          </div>
        </div>
      </div>
      <div class="box_7 flex-col">
        <div class="group_18 flex-col"></div>
        <span class="text_43" @click="openLink(4)">{{ this.papers[4].content }}</span>
        <div class="group_19 flex-row">
          <div
            class="image-text_24 flex-row justify-between"
            @click="openLink(4)"
          >
            <img
              class="thumbnail_11"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng92b27a33489a7bda69edc446047d7f25109f9351328adb4e69779172994168a1"
            />
            <span class="text-group_9">阅读报告</span>
          </div>
        </div>
      </div>
      <div class="box_8 flex-col">
        <div class="group_20 flex-col"></div>
        <span class="text_44" @click="openLink(5)">{{ this.papers[5].content }}</span>
        <div class="group_21 flex-row">
          <div
            class="image-text_25 flex-row justify-between"
            @click="openLink(5)"
          >
            <img
              class="thumbnail_12"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng92b27a33489a7bda69edc446047d7f25109f9351328adb4e69779172994168a1"
            />
            <span class="text-group_10">阅读报告</span>
          </div>
        </div>
      </div>
      <div class="box_9 flex-col">
        <div class="box_10 flex-col"></div>
        <span class="text_45" @click="openLink(6)">{{ this.papers[6].content }}</span>
        <div class="box_11 flex-row">
          <div
            class="image-text_26 flex-row justify-between"
            @click="openLink(6)"
          >
            <img
              class="thumbnail_13"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng92b27a33489a7bda69edc446047d7f25109f9351328adb4e69779172994168a1"
            />
            <span class="text-group_11">阅读报告</span>
          </div>
        </div>
      </div>
      <div class="image-text_11 flex-col" @click="gotoPaper()">
        <img
          class="image_4"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngdee63992f4c7358055fdbb69625a38ed5f440f82c6abb1c5c23fb794da611396"
        />
        <span class="text-group_12">更多学术报告</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getPapperFirst } from "@/api/publicSearch";
export default {
  data() {
    return {
      papers: [],
    };
  },
  methods: {
    gotoPaper() {
      this.$router.push("/paper");
    },
    openLink(index) {
      window.open(this.papers[index].url, "_blank");
    },
  },
  mounted() {
    getPapperFirst().then((res) => {
      this.papers = res.data.data.slice(0, 7);
      // 防止过长进行截断处理
      const maxLength = 370; // 截断的最大长度
      this.papers.forEach((item) => {
        if (item.content.length > maxLength) {
          item.content = item.content.slice(0, maxLength) + "...";
        }
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.group_11 {
  background-color: rgba(222, 234, 251, 1);
  width: 1440px;
  height: 1072px;
  margin-top: -1px;
  .group_30 {
    width: 1264px;
    height: 60px;
    margin: 57px 0 0 88px;
    .text-group_24 {
      width: 128px;
      height: 60px;
      .text_36 {
        width: 128px;
        height: 32px;
        overflow-wrap: break-word;
        color: rgba(0, 84, 190, 1);
        font-size: 32px;
        font-family: SourceHanSansCN-Bold;
        font-weight: 700;
        text-align: justify;
        white-space: nowrap;
        line-height: 48px;
      }
      .text_37 {
        width: 111px;
        height: 24px;
        overflow-wrap: break-word;
        color: rgba(0, 84, 190, 1);
        font-size: 24px;
        font-family: SourceHanSansCN-Bold;
        font-weight: 700;
        text-align: justify;
        white-space: nowrap;
        line-height: 36px;
        margin-top: 4px;
      }
    }
    .text_38 {
      width: 74px;
      height: 14px;
      overflow-wrap: break-word;
      color: rgba(0, 84, 190, 1);
      font-size: 14px;
      font-family: SourceHanSansCN-Regular;
      font-weight: normal;
      text-align: right;
      white-space: nowrap;
      line-height: 21px;
      cursor: pointer;
    }
  }
  .grid_2 {
    width: 1248px;
    height: 856px;
    flex-wrap: wrap;
    margin: 24px 0 75px 88px;
    .box_3 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin: 0 16px 16px 0;
      &:nth-child(4n) {
        margin-right: 0;
      }
      &:nth-last-child(-n + 4) {
        margin-bottom: 0;
      }
      .group_12 {
        background-color: rgba(19, 88, 165, 1);
        width: 300px;
        height: 4px;
      }
      .text_39 {
        width: 252px;
        height: 232px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin: 16px 0 0 24px;
        cursor: pointer;
      }
      .group_13 {
        background-color: rgba(19, 88, 165, 1);
        border-radius: 4px;
        width: 120px;
        height: 40px;
        margin: 104px 0 24px 24px;
        .image-text_20 {
          width: 86px;
          height: 16px;
          margin: 12px 0 0 17px;
          .thumbnail_7 {
            width: 14px;
            height: 16px;
          }
          .text-group_5 {
            width: 64px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .box_4 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin: 0 16px 16px 0;
      .group_14 {
        background-color: rgba(19, 88, 165, 1);
        width: 300px;
        height: 4px;
      }
      .text_40 {
        width: 252px;
        height: 299px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin: 16px 0 0 24px;
        cursor: pointer;
      }
      .group_15 {
        background-color: rgba(19, 88, 165, 1);
        border-radius: 4px;
        width: 120px;
        height: 40px;
        margin: 37px 0 24px 24px;
        .image-text_21 {
          width: 86px;
          height: 16px;
          margin: 12px 0 0 17px;
          .thumbnail_8 {
            width: 14px;
            height: 16px;
          }
          .text-group_6 {
            width: 64px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .box_5 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin: 0 16px 16px 0;
      .section_4 {
        background-color: rgba(19, 88, 165, 1);
        width: 300px;
        height: 4px;
      }
      .text_41 {
        width: 252px;
        height: 299px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin: 16px 0 0 24px;
        cursor: pointer;
      }
      .section_5 {
        background-color: rgba(19, 88, 165, 1);
        border-radius: 4px;
        width: 120px;
        height: 40px;
        margin: 37px 0 24px 24px;
        .image-text_22 {
          width: 86px;
          height: 16px;
          margin: 12px 0 0 17px;
          .thumbnail_9 {
            width: 14px;
            height: 16px;
          }
          .text-group_7 {
            width: 64px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .box_6 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin-bottom: 16px;
      .group_16 {
        background-color: rgba(19, 88, 165, 1);
        width: 300px;
        height: 4px;
      }
      .text_42 {
        width: 252px;
        height: 333px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin: 16px 0 0 24px;
        cursor: pointer;
      }
      .group_17 {
        background-color: rgba(19, 88, 165, 1);
        border-radius: 4px;
        width: 120px;
        height: 40px;
        margin: 3px 0 24px 24px;
        .image-text_23 {
          width: 86px;
          height: 16px;
          margin: 12px 0 0 17px;
          .thumbnail_10 {
            width: 14px;
            height: 16px;
          }
          .text-group_8 {
            width: 64px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .box_7 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin: 0 16px 16px 0;
      .group_18 {
        background-color: rgba(19, 88, 165, 1);
        width: 300px;
        height: 4px;
      }
      .text_43 {
        width: 252px;
        height: 314px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin: 16px 0 0 24px;
        cursor: pointer;
      }
      .group_19 {
        background-color: rgba(19, 88, 165, 1);
        border-radius: 4px;
        width: 120px;
        height: 40px;
        margin: 22px 0 24px 24px;
        .image-text_24 {
          width: 86px;
          height: 16px;
          margin: 12px 0 0 17px;
          .thumbnail_11 {
            width: 14px;
            height: 16px;
          }
          .text-group_9 {
            width: 64px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .box_8 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin: 0 16px 16px 0;
      .group_20 {
        background-color: rgba(19, 88, 165, 1);
        width: 300px;
        height: 4px;
      }
      .text_44 {
        width: 252px;
        height: 299px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin: 16px 0 0 24px;
        cursor: pointer;
      }
      .group_21 {
        background-color: rgba(19, 88, 165, 1);
        border-radius: 4px;
        width: 120px;
        height: 40px;
        margin: 37px 0 24px 24px;
        .image-text_25 {
          width: 86px;
          height: 16px;
          margin: 12px 0 0 17px;
          .thumbnail_12 {
            width: 14px;
            height: 16px;
          }
          .text-group_10 {
            width: 64px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .box_9 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin: 0 16px 16px 0;
      .box_10 {
        background-color: rgba(19, 88, 165, 1);
        width: 300px;
        height: 4px;
      }
      .text_45 {
        width: 252px;
        height: 299px;
        overflow-wrap: break-word;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-family: SourceHanSansCN-Regular;
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin: 16px 0 0 24px;
        cursor: pointer;
      }
      .box_11 {
        background-color: rgba(19, 88, 165, 1);
        border-radius: 4px;
        width: 120px;
        height: 40px;
        margin: 37px 0 24px 24px;
        .image-text_26 {
          width: 86px;
          height: 16px;
          margin: 12px 0 0 17px;
          .thumbnail_13 {
            width: 14px;
            height: 16px;
          }
          .text-group_11 {
            width: 64px;
            height: 16px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: normal;
            text-align: justify;
            white-space: nowrap;
            line-height: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .image-text_11 {
      background-color: rgba(255, 255, 255, 1);
      width: 300px;
      height: 420px;
      border: 1px solid rgba(184, 204, 233, 1);
      margin-bottom: 16px;
      justify-content: flex-center;
      cursor: pointer;
      .image_4 {
        width: 64px;
        height: 64px;
        margin: 158px 0 0 118px;
      }
      .text-group_12 {
        width: 144px;
        height: 24px;
        overflow-wrap: break-word;
        color: rgba(135, 162, 201, 1);
        font-size: 24px;
        font-family: SourceHanSansCN-Bold;
        font-weight: 700;
        text-align: justify;
        white-space: nowrap;
        line-height: 36px;
        margin: 16px 0 158px 78px;
      }
    }
  }
}
/* 第二个CSS样式 */
@import "@/css/common.scss";
</style>